<template>
  <div class="map-container">
    <Map ref="mapRef" :type="'full'" />
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, onMounted, defineProps, defineAsyncComponent } from "vue";
import Map from "@/components/DeviceMap/index.vue";
import MapAPI from "../../../../mock/map.mock";
// const Map = defineAsyncComponent(
//   () => import("@/components/DeviceMap/index.vue")
// );
const pointList = ref([]);
const mapRef: any = ref();
const drawPoint = async (pointList: Array<any>) => {
  console.log("pointList", pointList);
  const deviceList = pointList;
  if (deviceList && deviceList.length > 0) {
    mapRef.value.initPoint(deviceList);
    console.log("deviceList", deviceList, "mapRef.value", mapRef.value);
    if (!deviceList[0]?.coordinate) return;
    mapRef.value.setCenter(deviceList[0]?.coordinate.split(","));
  }
};
// 请求设备数据，显示在地图上
const getPonitList = async () => {
  const result = await MapAPI.getDeviceList();
  pointList.value = result.data.list;
  // console.log("pointList", pointList.value);
  drawPoint(result.data.list);
};
onMounted(async () => {
  await mapRef.value?.initMap();
  getPonitList();
});
</script>

<style lang="scss" scoped>
.map-container {
  height: calc(100vh - 84px);
}
</style>
